import React from 'react';
import { Button, Row, Col } from 'antd';
import UserList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import UserAdd from './add';
import FilterTool from '../../../components/FilterTool';

class ProductIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'product';
    this.addComponent = UserAdd;
    this.editComponent = UserAdd;
    this.listsComponent = UserList;
    this.model_width = 400;
  }
  componentDidMount() { }

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入产品名|产品CODE|创建人|修改人进行搜索'
      }
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6} style={{ textAlign: 'middle' }}>
            <Button type='primary' onClick={this.add.bind(this, { title: '创建产品' })}>
              创建产品
            </Button>
          </Col>
          <Col span={18}>
            <Row type='flex' justify='end' align='middle'>
              <Col span={18}>
                <FilterTool
                  ref='filterTool'
                  data={data}
                  colNum={1}
                  query={this.freshQueryList}
                  refreshFilter={this.refreshFilter}
                  isOnChange={true}
                  refresh={this.resetList}
                  justify='end'
                />
              </Col>
            </Row>
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            showDetail={this.showDetail}
            edit={this.edit}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
            rowKey='product_id'
          />
        </div>
      </div>
    );
  }
}

export default ProductIndex;
